<template>
    <div class="invitation-page">
        <el-card v-if="loading" class="invitation-card">
            <el-spin tip="加载邀请中..."></el-spin>
        </el-card>
        <el-card v-else class="invitation-card">
            <h2>项目邀请</h2>
            <p><strong>项目名称：</strong>{{ invitation.projectName }}</p>
            <p><strong>角色：</strong>{{ invitation.roleName }}</p>
            <p><strong>邀请人：</strong>{{ invitation.inviterName }}</p>
            <div class="action-buttons">
                <el-button type="primary" @click="acceptInvitation" :loading="actionLoading">接受邀请</el-button>
                <el-button type="danger" @click="rejectInvitation" :loading="actionLoading">拒绝邀请</el-button>
            </div>
            <p v-if="message" :class="messageClass">{{ message }}</p>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '../../stores/UserStore';
import { ElMessage } from 'element-plus';
import { getInvitationDetails, acceptInvitationMethod, rejectInvitationMethod } from '../../api/Tenant/invitationApi';
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

const token = route.query.token as string;

const loading = ref(true);
const actionLoading = ref(false);
const invitation = ref({
    projectName: '',
    roleName: '',
    inviterName: '',
    projectId: '',
});
const message = ref('');
const messageClass = ref('');

onMounted(async () => {
    if (!token) {
        message.value = '无效的邀请链接。';
        messageClass.value = 'error-message';
        loading.value = false;
        return;
    }

    // 检查用户是否已登录
    if (!userStore.userInfo.userId) { // 假设 userInfo 中有 userId 字段
        // 将 Token 存储到 Pinia 中
        userStore.setInvitationToken(token);
        // 重定向到登录页面
        router.push({ name: 'Login' });
        return;
    }

    // 如果用户已登录，加载邀请详情
    await loadInvitationDetails(token);
});

const loadInvitationDetails = async (token: string) => {
    try {
        const response = await getInvitationDetails(token);
        invitation.value = response;
    } catch (error) {
        message.value = '加载邀请失败。';
        messageClass.value = 'error-message';
    } finally {
        loading.value = false;
    }
};

const acceptInvitation = async () => {
    actionLoading.value = true;
    try {
        const response = await acceptInvitationMethod(token);

        ElMessage.success('邀请已接受，已加入项目。');
        // 可选：跳转到项目详情页面
        setTimeout(() => {
            router.push("/home");
        }, 1000);

    } catch (error) {
        ElMessage.error('接受邀请失败。');
    } finally {
        actionLoading.value = false;
    }
};

const rejectInvitation = async () => {
    actionLoading.value = true;
    try {
        const response = await rejectInvitationMethod(token);

        ElMessage.success('邀请已拒绝。');
        // 可选：跳转到首页或其他页面
        setTimeout(() => {
            router.push("/home");
        }, 1000);


    } catch (error) {
        ElMessage.error('拒绝邀请失败。');
    } finally {
        actionLoading.value = false;
    }
};
</script>

<style scoped>
.invitation-page {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 400px;
    /* height: 80vh; */
}

.invitation-card {
    width: 500px;
    text-align: center;
}

.action-buttons {
    margin: 20px 0;
}

.success-message {
    color: green;
}

.error-message {
    color: red;
}
</style>